// import React from 'react'
import { SearchBar, Card, Tabs, Button, Divider } from "antd-mobile";
import { doctorsAPI } from "../../services/doctor";
import { useEffect } from "react";
function News() {
  /* yisheng */
  useEffect(() => {
    doctorsAPI().then((res) => {
      console.log(res);
    });
  }, []);
  return (
    <div>
      {/* 搜索栏 */}
      <SearchBar
        className="homesearch"
        style={{
          width: "90vw",
          "--height": "35px",
          "--border-radius": "100px",
          margin: "0 auto",
          marginTop: "20px",
          borderRadius: "50px",
          "--padding-left": "20px",
          border: "none",
          outline: "none",
          "--background": "white",
        }}
        placeholder="搜医院、医生、科室、疾病"
      />
      {/* 看砖家 */}
      <div
        style={{
          marginTop: "20px",
          marginBottom: "20px",
          marginLeft: "20px",
          position: "relative",
        }}>
        <p
          style={{
            fontWeight: "600",
            fontSize: "22px",
          }}>
          看砖家
          <span
            style={{
              fontSize: "14px",
              fontWeight: "400",
              marginLeft: "5px",
            }}>
            指定医生，获取专业意见
          </span>
        </p>
        <div
          style={{
            fontSize: "15px",
            fontWeight: "500",
            position: "absolute",
            right: "20px",
            top: "10px",
            cursor: "pointer",
            color: "skyblue",
          }}>
          全部医生
        </div>
      </div>
      {/* doc */}
      <Card
        style={{
          width: "90vw",
          margin: "0 auto",
        }}>
        <Tabs
          activeLineMode="fixed"
          style={{
            "--fixed-active-line-width": "20px",
          }}>
          <Tabs.Tab
            title="综合"
            key="1">
            <div
              style={{
                marginLeft: "70px",
                marginBottom: "20px",
                position: "relative",
                width: "230px",
                height: "100px",
              }}>
              <img
                style={{
                  width: "60px",
                  height: "60px",
                  borderRadius: "100px",
                  position: "absolute",
                  left: "-75px",
                }}
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F06db91d3-41e1-479e-9608-609933b05975%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688175029&t=f73fceba44cd9e21aa42b13f0c9b7a7d"
              />
              <p
                style={{
                  fontSize: "18px",
                  fontWeight: "600",
                }}>
                王晓铁
                <span
                  style={{
                    fontSize: "14px",
                    fontWeight: "400",
                    marginLeft: "10px",
                    color: "rgb(50, 58, 115)",
                  }}>
                  主治医生
                </span>
              </p>
              <p
                style={{
                  marginTop: "6px",
                  fontSize: "16px",
                  color: "rgb(101, 107, 141)",
                }}>
                中国福利会国际和平妇幼保健院 中医妇科
              </p>
              <p
                style={{
                  marginTop: "6px",
                  fontSize: "16px",
                  overflow: "hidden",
                  width: "230px",
                  whiteSpace: "nowrap",
                  textOverflow: "ellipsis",
                }}>
                擅长：不孕症、更年期综合征、月经失调
              </p>
            </div>
            <Divider />
            <div
              style={{
                marginLeft: "70px",
                position: "relative",
                width: "230px",
                height: "100px",
                borderBottom: "3px soild #cecece",
              }}>
              <img
                style={{
                  width: "60px",
                  height: "60px",
                  borderRadius: "100px",
                  position: "absolute",
                  left: "-75px",
                }}
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F06db91d3-41e1-479e-9608-609933b05975%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688175029&t=f73fceba44cd9e21aa42b13f0c9b7a7d"
              />
              <p
                style={{
                  fontSize: "18px",
                  fontWeight: "600",
                }}>
                王晓铁
                <span
                  style={{
                    fontSize: "14px",
                    fontWeight: "400",
                    marginLeft: "10px",
                    color: "rgb(50, 58, 115)",
                  }}>
                  主治医生
                </span>
              </p>
              <p
                style={{
                  marginTop: "6px",
                  fontSize: "16px",
                  color: "rgb(101, 107, 141)",
                }}>
                中国福利会国际和平妇幼保健院 中医妇科
              </p>
              <p
                style={{
                  marginTop: "6px",
                  fontSize: "16px",
                  overflow: "hidden",
                  width: "230px",
                  whiteSpace: "nowrap",
                  textOverflow: "ellipsis",
                }}>
                擅长：不孕症、更年期综合征、月经失调
              </p>
            </div>
            <Button
              style={{
                color: "rgb(63, 134, 255)",
                border: "1px solid rgb(63, 134, 255)",
                borderRadius: "100px",
                width: "100px",
                fontWeight: "600",
                marginTop: "15px",
                marginLeft: "100px",
              }}>
              更多砖家
            </Button>
          </Tabs.Tab>
          <Tabs.Tab
            title="皮肤科"
            key="2">
            2
          </Tabs.Tab>
          <Tabs.Tab
            title="妇科"
            key="3">
            3
          </Tabs.Tab>
          <Tabs.Tab
            title="耳鼻咽喉科"
            key="4">
            4
          </Tabs.Tab>
          <Tabs.Tab
            title="骨科"
            key="5">
            5
          </Tabs.Tab>
        </Tabs>
      </Card>
    </div>
  );
}

export default News;
